<template>
  <div class="wrapper">
    <weex-amap class="map" scale="true" geolocation="true" :center="pos">
      <weex-amap-marker :position="point.position" :title="point.title"></weex-amap-marker>
    </weex-amap>
    <div class="info-wrapper">
      <text class="info-item">厂家型号: {{GSMC}}({{SBXH}})</text>
      <text class="info-item">经度:{{JD}} 纬度:{{WD}}</text>
      <text class="info-item">详细地址: {{XXDZ}}</text>
    </div>
  </div>
</template>

<script>
  import { webUrl } from '@/config'
  import event from '@/net/event.js'
  import { getCache } from '@/util/storageUtils.js'
  import { CTCE_SBJWD } from '@/config/storageTypes.js'
  import qs from 'qs'
  // const amap = weex.requireModule('amap')
  // amap.initAmap('c62933bc6cecda1ddaf3f404ff9374f3')

  export default {
    name: 'location',
    data () {
      return {
        jwd: {},
        url: webUrl + 'equipmentPosition.html',
        GSMC: '',
        SBXH: '',
        JD: 0,
        WD: 0,
        XXDZ: ''
      }
    },
    computed: {
      pos () {
        return [this.JD, this.WD]
      },
      point () {
        return {
          position: this.pos
        }
      }
    },
    beforeCreate () {
      this.$notice.loading.show()
    },
    created () {
      this.$navigator.setNavigationInfo({
          title: '设备定位',
          navShow: true,
          statusBarStyle: 'LightContent'
      })
      getCache(CTCE_SBJWD).then(res => {
        const data = JSON.parse(res)
        this.JD = parseFloat(data.JD)
        this.WD = parseFloat(data.WD)
        this.GSMC = data.GSMC
        this.SBXH = data.SBXH
        this.XXDZ = data.XXDZ
        this.$nextTick(() => {
          this.$notice.loading.hide()
        })
      })
    }
  }
</script>

<style lang="scss">
  @import "../../../config/styles";

  .wrapper {
    margin-bottom: 64.6px;
    flex: 1;
  }
  .map {
    flex: 1;
  }
  .info-wrapper {
    position: fixed;
    top: 31.25px;
    right: 31.25px;
    width: 416.7px;
    height: 145.8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10.4px;
    padding: 10.4px;
    @include allBorder(1px, solid, #ccc);
    justify-content: space-around;
  }
  .info-item {
    font-size: 23px;
    color: #2c3e50;
    text-overflow: ellipsis;
    lines: 1;
  }
</style>
